<template>
  <div class="standerd-page">
    <van-nav-bar
      fixed
      left-arrow
      :title="config.header.title"
      :right-text="config.header.rightText"
      :placeholder="true"
      @click-left.stop="backAction"
      @click-right.stop="clickRight"
    />
    <div class="standerd-page__content">
      <template v-if="config.headerSlot">
        <slot name="custom" />
      </template>
      <grid-form
        v-if="config.formInfo"
        class="standerd-page__form"
        :config="config.formInfo.config"
        :value="config.formInfo.value"
        :rules="config.formInfo.rules"
        @change="handlerChange"
      />
      <template v-if="config.footerSlot">
        <slot name="custom" />
      </template>
      <div class="qt__form--placeholder" />
    </div>
    <qt-button-group
      class="standerd-page__footer-button--group"
      :list="config.footer"
      @click="clickButton"
    />
  </div>
</template>

<script>
import GridForm from '../grid-form';
import QtButtonGroup from '../../baseComp/button-group';

export default {
  name: 'StanderdPage',

  components: {
    GridForm,
    QtButtonGroup,
  },

  props: {
    config: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  methods: {
    handlerChange(value, fieldName) {
      this.config.formInfo.value[fieldName] = value;
      this.$emit('input-enter', this.config.formInfo.value, fieldName);
    },

    clickButton(eventAction) {
      this.$emit('click-button', eventAction);
    },

    clickRight() {
      this.$emit('click-right');
    },

    clickCard(data) {
      this.$emit('click-card', data);
    },

    backAction() {
      if (this.config.header.isComponent) {
        this.$emit('click-header-left', 'back');
      } else {
        this.$emit('click-left');
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.standerd-page {
  &__content {
    margin: 45px 0 60px 0;
  }
  &__footer-button--group {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 8;
  }
}
</style>
